<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/head :: head('报名参会')"/>
<style>
    .index-header-menus, .index-header-gray, .index-header-search {
        display: none;
    }

    .index-header-main__back {
        display: block;
    }

    .login-block {
        min-height: 800px;
        width: 1080px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 40px;
    }

    .login-block-logo {
        width: 380px;
        margin-right: 100px;
    }
    .login-block-logo img {
        width: 100%;
    }

    .login-wrap {
        width: 400px;
        border-radius: 15px;
        background: #FFF;
    }


    .login-wrap-head {
        display: flex;
    }

    .login-wrap-head-item {
        flex: 1;
        height: 58px;
        line-height: 58px;
        font-weight: 700;
        font-style: normal;
        font-size: 22px;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid #797979;
    }

    .login-wrap-head-item + .login-wrap-head-item {
        border-left: 1px solid #797979;
    }

    .is-active {
        border-bottom: none;
    }

    .login-wrap-content {
        padding: 30px;
    }

    .login-wrap-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 30px 20px;
    }

    .form-control {
        height: 40px;
    }

    .btn-success {
        height: 40px;
        font-size: 18px;
        margin-top: 30px;
        background-color: var(--color);
        border-color: var(--color);
    }

    label.error {
        top: 12px;
    }

    .code-btn {
        width: 100%;
        color: #333333;
        font-size: 13px;
        background-color: #ffad6b;
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 5px;
        border-radius: 20px;
        cursor: pointer;
    }
</style>
<body>
<th:block th:include="common/head :: header('/')"/>

<div class="login-block">
    <div class="login-block-logo">
        <img src="/img/login.png" />
    </div>
    <div class="login-wrap">
        <div class="login-wrap-head">
            <div class="login-wrap-head-item is-active" refer="person">报名参会</div>
        </div>
        <div class="login-wrap-content" id="loginWrap1">
            <form id="loginForm1">
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="text" name="companyName" class="form-control uname" autocomplete="off" placeholder="请输入参会公司名称" value=""/>
                    </div>
                </div>
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="text" name="phone" class="form-control uname" autocomplete="off"
                               placeholder="请输入参会公司联系人电话" value=""/>
                    </div>
                </div>
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="email" name="email" class="form-control uname" autocomplete="off" placeholder="请输入参会公司电子邮件地址" value=""/>
                    </div>
                </div>
                <button class="btn btn-success btn-block" id="btnSubmit1" data-loading="正在操作，请稍候...">报名参会</button>
            </form>
        </div>
    </div>
</div>

<th:block th:include="common/head :: footer"/>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/me/jq.form.serialize.js}"></script>

</body>
<script>
    var vform = $("#loginForm1").validate({
        rules: {
            companyName: 'required',
            phone: {
                required: true,
                mobile: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            companyName: '请输入公司名称',
            phone: {
                required: "请输入联系电话",
                mobile: "请输入正确的手机号"
            },
            email: {
                required: "请输入电子邮箱",
                email: "请输入正确的电子邮箱"
            }
        },
        submitHandler: function () {
            doSubmit()
        }
    });


   function doSubmit() {

   }


    function validatePhone(phone) {
        return /^1[3456789]\d{9}$/.test(phone);
    }

    function validateEmail(email) {
        return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email);
    }

    $.validator.addMethod('mobile', function(value, element) {
        return this.optional(element) || validatePhone(value);
    })

    $.validator.addMethod('email', function(value, element) {
        return this.optional(element) || validateEmail(value);
    })

</script>
</html>